<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style>

        /*
            font 	在一个声明中设置所有的字体属性
            font-family 	指定文本的字体系列
            font-size 	    指定文本的字体大小
            font-style 	    指定文本的字体样式
            font-variant 	以小型大写字体或者正常字体显示文本。
            font-weight 	指定字体的粗细。
        */


        p.serif{
            font-family:"Times New Roman", Times, serif, "宋体";     /*如果浏览器不支持第一种字体，他将尝试下一种字体。如果字体系列的名称超过一个字，它必须用引号。*/
        }
        p.sansserif{
            font-family:Arial,Helvetica,sans-serif;
        }

        p.normal {font-style:normal;}   /*字体样式*/
        p.italic {font-style:italic;}
        p.oblique {font-style:oblique;}

        p {font-size:14px;}/*字体大小*/
        h1 {font-size:2.5em;} /* 40px/16=2.5em   1em和当前字体大小相等。在浏览器中默认的文字大小是16px。*/


        p.normal {font-weight:normal;}/*font-weight  字体加粗*/
        p.light {font-weight:lighter;}
        p.thick {font-weight:bold;}
        p.thicker {font-weight:900;}

        p.normal {font-variant:normal;}/*font-weight  字体转变*/
        p.small {font-variant:small-caps;}


        p.ex1 {  font:15px arial,sans-serif;  }
        p.ex2 {  font:italic bold 12px/30px Georgia,serif;  }
    </style>
</head>
<body>
<!--CSS字体属性定义字体，加粗，大小，文字样式。
sans-serif字体被认为是比serif字体容易阅读
sans-serif   无衬线，"Sans"是指无 - 这些字体在末端没有额外的装饰
serif    有衬线，拥有额外的装饰
Monospace  所有的等宽字符具有相同的宽度

font-family  字体系列
-->
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

<!-- font-style 字体样式
    normal  正常 - 正常显示文本
    italic  斜体 - 以斜体字显示的文字
    oblique 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
-->
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
<!--font-size   字体大小
字体大小的值可以是绝对或相对的大小。
    绝对大小：
        设置一个指定大小的文本
        不允许用户在所有浏览器中改变文本大小
        确定了输出的物理尺寸时绝对大小很有用
    相对大小：
        相对于周围的元素来设置大小
        允许用户在浏览器中改变文字大小
 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
-->
<h1>This is heading 1</h1>

<!--使用百分比和EM组合
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
-->

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>

<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
<p class="ex2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>
</html>